<template>
	<view class="fullscreen bg-fff">
		<view class="pl-3 d-flex d-flex-middle" :style="{'paddingTop':statusBarHeight+'px', 'height': titleBarHeight + 'px'}" @click="goBack">
			<text class="iconfont icon-31fanhui1 color333"></text>
		</view>
		<view style="margin-top: 80rpx;margin-bottom: 80rpx;padding-left: 90rpx;">
			<view style="font-size: 48rpx;color: #202020;font-weight: bold;">登录获得更多精彩</view>
			<view class="font">墨者云集市本地生活服务</view>
		</view>
		<view style="padding-left: 90rpx;padding-right: 90rpx;margin-bottom: 90rpx;">
			<view class="d-flex rounded10 d-flex-middle px-3 mb-1" style="height: 90rpx;background-color: #F7F7F7;">
				<input class="d-flex-item font30" v-model="user.mobile" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#BFBFBF" />
				<view v-if="user.mobile" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorhold" @click="()=>user.mobile=''"></text></view>
			</view>
			<view class="d-flex rounded10 d-flex-middle px-3 mb-2" style="height: 90rpx;background-color: #F7F7F7;">
				<input class="d-flex-item font30" v-model="user.password" :password="pwdStatus" placeholder="请输入登录密码" placeholder-style="color:#BFBFBF" />
				<view v-if="user.password" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorhold" @click="()=>user.password=''"></text></view>
			</view>
			<view class="mb-3 d-flex d-flex-middle line-height0">
				<checkbox color="#ff992a" :checked="isChecked" style="transform:scale(0.6)" @click="isChecked = !isChecked"></checkbox><text class="font22 color999" @click="isChecked = !isChecked">已阅读并同意</text><text class="font22 main-color">《用户协议》</text><text class="font22 color999">及</text><text class="font22 main-color">《隐私条款》</text>
			</view>
			<view class="mb-2">
				<view @click="login" class="rounded10 bg-main d-flex d-flex-middle d-flex-center colorfff" style="height: 90rpx;line-height: 90rpx;font-size:36rpx;">登录</view>
			</view>
			<view class="d-flex d-flex-between">
				<text class="font24" style="color: #737373;">注册账号</text>
				<text class="font24" style="color: #737373;">验证码登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { manner } from '@/util/manner';
import { userApi } from '@/http/userApi.js'
import { useUserStore } from '@/store/modules/user.js'
import { USER_TOKEN } from '@/constants/local-storage-key-const';
const statusBarHeight = computed(() => {
	return useUserStore().statusBarHeight;
})
const titleBarHeight = computed(() => {
	return useUserStore().titleBarHeight;
})
let isChecked = ref(true)
let pwdStatus = ref(true)
let user = reactive({
	password: "",
	mobile: ""
})
function goBack(){
	manner.goBack()
}
async function login(){
	if(!isChecked.value){
		uni.showToast({
			title:'请先勾选用户协议！',
			icon:'none'
		})
		return
	}
	if(!user.mobile){
		uni.showToast({
			title:'请输入手机号！',
			icon:'none'
		})
		return
	}
	if(!user.password){
		uni.showToast({
			title:'请输入密码！',
			icon:'none'
		})
		return
	}
	try {
		uni.showLoading({
			title:'登录中...'
		})
		// let encryptPasswordForm = Object.assign({}, loginForm, {password: encryptData(loginForm.password)});
		const usr = await userApi.loginByApp(user)
		if(usr.data && usr.data.tokenInfo.tokenValue && usr.data.user){
			uni.setStorageSync(USER_TOKEN, usr.data.tokenInfo.tokenValue);
			useUserStore().setUserLoginInfo(usr.data.user);
			manner.goBack()
		}
	}catch (e) {
		uni.showToast({
			title:e.msg,
			icon:'none'
		})
	}finally{
		uni.hideLoading()
	}
}
</script>

<style>

</style>
